<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .swiper {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="main" class=" ">
        <div class="home ">
            <div class="banner ">
                <!-- 轮播图位置 -->

                <div class="swiper df">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../../assets/imgs/t1.png" alt="" width="100%" height="170px"></div>
                        <div class="swiper-slide"><img src="../../assets/imgs/t2.png" alt="" width="100%" height="170px"></div>
                        <div class="swiper-slide"><img src="../../assets/imgs/t3.png" alt="" width="100%" height="170px"></div>
                    </div>
                </div>

            </div>
            <div class="HealthData ">
                <!-- 数据全部 -->
                <div class="ranking  df">
                    <!-- 今日排名 -->
                    <div class="ranking-left  bor">
                        <h3>&nbsp;今日排名</h3>
                        <h1>9</h1>
                    </div>
                    <div class="ranking-right  bor">
                       
                    </div>
                </div>
                <div class="MotionData ">
                    <!-- 运动数据 -->
                    <ul class="df ">
                        <li class=" bor">
                            <h3>运动数据</h3>
                        </li>

                        <li class=" bor badge">
                            <h4>累计运动徽章</h4>
                            <div>
                                <h1 class="ds">3</h1><span>枚</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="training ">
                    <!-- 课程训练 -->
                    <br>
                    <h3 style="color: #ffff;">&nbsp;&nbsp;课程训练</h3>
                </div>
                <div class="MotionDatax ">
                    <!-- 运动数据 -->
                    <br>
                    <h3 style="color: #ffff;">&nbsp;&nbsp;户外跑步</h3>
                </div>
        
            </div>
        </div>
    </div>


    <div class="tabbar">
        <ul>
            <li>
                <a href="#" class="active">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_0.png" />
                        <img class="on" src="../../assets/imgs/tabbar_0_on.png" />
                    </p>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_1.png" />
                        <img class="on" src="../../assets/imgs/tabbar_1_on.png" />
                    </p>
                    <span>运动</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_2.png" />
                        <img class="on" src="../../assets/imgs/tabbar_2_on.png" />
                    </p>
                    <span>圈子</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_3.png" />
                        <img class="on" src="../../assets/imgs/tabbar_3_on.png" />
                    </p>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>